<template>
    <span>
        <a v-if="href" :class="linkClasses" @click="handleClick" :href="href">
            <slot></slot>
        </a>
        <span v-else :class="linkClasses">
            <slot></slot>
        </span>
        <span :class="separatorClasses" v-html="separator" v-if="!showSeparator"></span>
        <span :class="separatorClasses" v-else>
            <slot name="separator"></slot>
        </span>
    </span>
</template>
<script>
  const prefixCls = 'oolong-breadcrumb-item';

  export default {
    name: 'oolongBreadcrumbItem',
    props: {
      href: {
        type: String
      },
      replace: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        separator: '',
        showSeparator: false
      };
    },
    computed: {
      linkClasses () {
        return `${prefixCls}-link`;
      },
      separatorClasses () {
        return `${prefixCls}-separator`;
      }
    },
    mounted () {
      this.showSeparator = this.$slots.separator !== undefined;
    },
    methods: {
      handleClick () {
        const isRoute = this.$router;
        if (isRoute) {
          this.replace ? this.$router.replace(this.href) : this.$router.push(this.href);
        } else {
          window.location.href = this.href;
        }
      }
    }
  };
</script>
